<template>
	<cl-page>
		<view class="page-set">
			<template v-if="user.info">
				<cl-text value="账号" :margin="[0, 0, 20, 20]" block />

				<cl-list :radius="16">
					<cl-list-item label="头像" :arrow-icon="false">
						<view class="avatar">
							<!-- #ifdef MP-WEIXIN -->
							<button open-type="chooseAvatar" @chooseavatar="uploadAvatar">
								<cl-avatar round :size="88" :src="user.info.avatarUrl" />
							</button>
							<!-- #endif -->

							<!-- #ifndef MP-WEIXIN -->
							<cl-avatar round :size="88" :src="user.info.avatarUrl" @tap="uploadAvatar()" />
							<!-- #endif -->
						</view>
					</cl-list-item>
					<cl-list-item label="昵称" @tap="router.push('/pages/user/edit')">
						<cl-text :value="user.info.nickName" />
					</cl-list-item>
					<cl-list-item label="手机号" :arrow-icon="false">
						<cl-text :value="user.info.phone" />
					</cl-list-item>
					<cl-list-item label="ID" :arrow-icon="false" :border="false">
						<cl-text :value="user.info.id" />
					</cl-list-item>
				</cl-list>
			</template>

			<cl-text value="关于" :margin="[30, 0, 20, 20]" block />

			<cl-list :radius="16">
				<cl-list-item :label="`关于${app.info.name}`" @tap="router.push('/pages/user/about')" />

				<cl-list-item label="用户协议" @tap="
						router.push({
							path: '/pages/user/doc',
							query: {
								key: 'userAgreement',
								title: '用户协议',
							},
						})
					" />
				<cl-list-item label="隐私政策" @tap="
						router.push({
							path: '/pages/user/doc',
							query: {
								key: 'privacyPolicy',
								title: '隐私政策',
							},
						})
					" />
				<!-- #ifndef MP-WEIXIN -->
				<cl-list-item label="App设置" @tap="router.push('/pages/user/app-setting')" v-if="!isAndroid" />
				<!-- #endif -->
			</cl-list>

			<cl-text value="反馈" :margin="[30, 0, 20, 20]" block />

			<cl-list :radius="16">
				<cl-list-item label="意见反馈" @tap="router.push('/pages/feedback/list')" />
				<cl-list-item label="投诉举报" @tap="router.push('/pages/complain/list')" />
			</cl-list>

			<cl-list :radius="16">

				<cl-list-item label="切换账号" @tap="router.push('/pages/user/login')" />
				<cl-list-item label="退出登录" :arrow-icon="false" @tap="user.logout()">
					<cl-icon :size="36" name="exit" />
				</cl-list-item>

			</cl-list>

			<cl-text value="注销" :margin="[30, 0, 20, 20]" block />

			<cl-list :radius="16">
				<cl-list-item label="注销账号" @tap="appLogoff" :arrowIcon="false">
					<template #append>
						<cl-loading theme="spin" :size="36" v-if="logoffLoading" />
					</template>
				</cl-list-item>
			</cl-list>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { onReady } from "@dcloudio/uni-app";
	import { isAndroid } from "/@/cool/utils"
	import { useApp, useCool, useStore } from "/@/cool";
	import { useUi } from "/$/cool-ui";

	const { router, upload, service } = useCool();
	const { user } = useStore();
	const ui = useUi();
	const app = useApp();
	const logoffLoading = ref(false)
	function appLogoff() {
		ui.showConfirm({
			title: "警告",
			message: "注销后所有播放记录、购买记录等都将消失,确认后立即生效,确认注销吗?",
			showCancelButton: true,
			confirmButtonText: "确定",
			callback(action) {
				if (action == "confirm") {
					logoffLoading.value = true
					service.user.info.logoff().then(() => {
						logoffLoading.value = false
						user.logout()
					}).catch(err => {
						ui.showToast(err.message);
						logoffLoading.value = false
					})
				}
			}
		});
	}
	// 上传头像
	function uploadAvatar(e ?: { detail : { avatarUrl : string } }) {
		function next(path : string) {
			upload({ path }).then((url) => {
				ui.showToast("头像更新成功");

				user.update({
					avatarUrl: url,
				});
			});
		}

		if (e) {
			next(e.detail.avatarUrl);
		} else {
			uni.chooseImage({
				count: 1,
				success(res) {
					next(res.tempFiles[0].path);
				},
			});
		}
	}

	onReady(() => {
		user.get();
	});
</script>

<style lang="scss" scoped>
	.page-set {
		padding: 20rpx 24rpx;

		.avatar {
			padding: 10rpx 0;
			height: 88rpx;

			button {
				padding: 0;
				margin: 0;
				line-height: normal;
				background-color: transparent;

				&::after {
					border: 0;
				}
			}
		}
	}
</style>